<template>
<div>
  <div class="money animated fadeInUp" >
    <img class="title" src="../assets/img/title.png">
    <img class="shuzi" src="../assets/img/shuzi.png">
    <div class="text1">由谭木匠提供的</div>
    <div class="text2">精美礼品一份</div>
    <img v-if="!!showOpen" @click="onLuck" class="money-btn animated swing" src="../assets/img/money.png">
    <div v-if="!!showRecord" class="recordbtn">您已经抽过啦，每人仅有一次机会哦！</div>
  </div>
</div>
</template>

<script>
export default {
  name: 'Success',
  data () {
    return {
      imgUrl: '',
      showMask: false,
      showOpen: true,
      showRecord: false
    }
  },
  mounted () {
    // 判断用户有没有抽过奖
    let bbid = sessionStorage.getItem('bbid')
    let objData = {
      userId: sessionStorage.getItem('userId'),
      confessionId: bbid
    }
    this.axios({
      method: 'get',
      url: 'http://211.149.169.49:8080/confession/user/getUserById.do',
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
      },
      data: objData,
      params: objData
    }).then(res => {
      if (res.data.data.isDraw === 0) {
        // 未抽奖
        this.showOpen = true
        this.showRecord = false
      } else {
        // 已抽奖
        this.showRecord = true
        this.showOpen = false
      }
    })
  },
  methods: {
    onLuck () {
      this.axios({
        method: 'post',
        url: 'http://211.149.169.49:8080/confession/user/luckDraw.do',
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
        },
        data: { userId: sessionStorage.getItem('userId') },
        params: { userId: sessionStorage.getItem('userId') }
      }).then(response => {
        if (response.data.data) {
          this.$router.push({ path: 'getMoney' })
        } else {
          this.$router.push({ path: 'loseMoney' })
        }
      })
    }
  }
}
</script>
<style  @scoped lang="less">
    @keyframes rotating
    {
    from {transform:rotate(0)}
    to {transform:rotate(360deg)}
    }

    @-webkit-keyframes rotating /*Safari and Chrome*/
    {
    from {transform:rotate(0)}
    to {transform:rotate(360deg)}
    }
    .money{
      text-align: center;
      width: 100%;
      height: 100vh;
      background: #FFF;
      .recordbtn{
        font-size: .25rem;
        color: red;
      }
      .title{
        width: 4.5rem;
        margin: 0 auto;
        padding-top: 1rem;
        padding-bottom: .6rem;
        height: 1.2rem;
      }
      .shuzi{
        width: 5.4rem;
        margin: 0 auto;
        margin-top: 1rem;
        margin-bottom: .4rem;
        height: 1.6rem;
      }
      .text1{
        font-size: .3rem;
        margin-bottom: .2rem;
        color: #000;
      }
      .text2{
        font-size: .3rem;
        margin-bottom: 2.5rem;
        color: #000;
      }
      .money-btn{
          width: 2.63rem;
          margin: 0 auto;
          height: .84rem;
          -webkit-animation-name:pulse2;
          animation-name:pulse2;
          animation-duration: 1s;
          animation-iteration-count: infinite;
      }
      @-webkit-keyframes pulse2{
        0%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}
        15%{-webkit-transform:scale3d(1.05,1.05,1.05);transform:scale3d(1.05,1.05,1.05)}
        50%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}
        100%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}
      }
      @keyframes pulse2{
        0%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}
        15%{-webkit-transform:scale3d(1.05,1.05,1.05);transform:scale3d(1.05,1.05,1.05)}
        50%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}
        100%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}
      }
    }
    </style>
